<template>
  <div>
    <h1>这是 App 组件</h1>
    <mt-button type="danger" icon="back" @click='show'>default</mt-button>

     <mt-button type="danger" size="large" plain>default</mt-button>
    
     <mt-button type="danger" size="small" disabled>default</mt-button>

     <mt-button @click.native="handleClick">点击触发 handleClick</mt-button>

     <!-- <mybtn type="primary">12345</mybtn> -->

    <button type="button" class="mui-btn mui-btn-royal">
					紫色
		</button>


    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>


 
  </div>
</template>

<script>

  import { Toast } from 'mint-ui'

  export default {
    data(){
      return {
        toastInstance:null
      };
    },
    created() {   // 在 vue对象 创造了后，获取数据
      this._getList()
    },
    methods: {
      handleClick() {
        alert("......");
      },

      _getList() {
        // 模拟获取列表的 一个 AJax 方法
        // 在获取数据之前，立即 弹出 Toast 提示用户，正在加载数据
        this.show();
       
        // setTimeout(function() {
        //   //  当 3 秒过后，数据获取回来了，要把 Toast 移除
        //    this.toastInstance.close(); // 这个fuction有作用域问题
        // }, 3000);
        
        // low的解决方法，除此外可以是用 箭头函数
        // var _this = this
        // setTimeout(function() {
        //   //  当 3 秒过后，数据获取回来了，要把 Toast 移除
        //    _this.toastInstance.close(); // 这个fuction有作用域问题
        // }, 3000);


        setTimeout(()=> {
          //  当 3 秒过后，数据获取回来了，要把 Toast 移除
           this.toastInstance.close(); // 这个fuction有作用域问题
        }, 3000);



      },
      show(){
        // Toast('提示信息');
        // var toastInstance = Toast({  这样的话是局部的，外边不能访问
          this.toastInstance = Toast({
          message: '这是消息',
          // duration: 1000,
          duration: -1, //如果是-1弹出以后不消失
          position: 'top',
          iconClass: 'glyphicon glyphicon-heart',  //这是设置弹框的图标
          className: 'mytoast' // 自定义Toast的样式，需要自己提供一个类名
        })


      }
    }


  }

</script>


<style>

</style>
